<template>
  <div class="page-next">
    <Row type="flex" justify="center">
      <Col span="12">
        <Form
          ref="FromRef"
          :model="fromData"
          :rules="fromRule"
          label-position="top"
          @on-validate="formValidate"
        >
          <FormItem label="姓名" prop="name">
            <Input
              v-model="fromData.name"
              maxlength="50"
              show-word-limit
              clearable
              placeholder="请输入内容"
            ></Input>
          </FormItem>
          <FormItem label="手机号码" prop="phoneNum">
            <Input
              v-model="fromData.phoneNum"
              maxlength="11"
              show-word-limit
              clearable
              placeholder="请输入内容"
            ></Input>
          </FormItem>
          <FormItem label="密码" prop="pwd">
            <Input
              v-model="fromData.pwd"
              placeholder="请输入内容"
              clearable
              @input="changeChange()"
            ></Input>
            <div class="pwd-box">
              <div class="pwd-box-item">
                <span
                  v-for="(item, index) in 3"
                  :key="item"
                  :class="
                    verifyPassword > index
                      ? 'pwd-box-current' + verifyPassword
                      : ''
                  "
                ></span>
              </div>
              <div class="pwd-box-tips">
                密码强度：<span>{{ verifyLevel[verifyPassword] }}</span>
              </div>
            </div>
          </FormItem>
          <FormItem label="确认密码" prop="pwdAgain">
            <Input
              v-model="fromData.pwdAgain"
              placeholder="请输入内容"
              clearable
            ></Input>
          </FormItem>
          <FormItem label="验证码" prop="code">
            <Input
              v-model="fromData.code"
              placeholder="请输入验证码"
              clearable
            ></Input>
          </FormItem>
        </Form>
        <div class="next-btn">
          <Button type="primary" :disabled="isBtnDisabled" @click="handleAgree"
            >下一步</Button
          >
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  props: {
    types: {
      type: Number,
      default: 2,
    },
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (value) {
        let re = /^[\u4e00-\u9fa5]+$/; // 验证中文
        if (value.length < 2) {
          callback(new Error("请输入长度2至50位的汉字"));
        }
        if (re.test(value)) {
          callback();
        } else {
          callback(new Error("请输入汉字"));
        }
      }
    };

    const validatePhone = (rule, value, callback) => {
      if (value) {
        let re = /^1\d{10}$/; // 验证中文
        if (re.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号"));
        }
      } else {
        callback(new Error("请输入手机号"));
      }
    };

    const validatePwd = (rule, value, callback) => {
      if (this.verifyPassword < 2) {
        callback("密码格式不正确");
      } else {
        callback();
      }
    };

    const validatePwdAgain = (rule, value, callback) => {
      if (this.fromData.pwd != this.fromData.pwdAgain) {
        callback("两次密码不一致");
      } else {
        callback();
      }
    };

    return {
      isBtnDisabled: true,
      fromData: {
        name: "",
        phoneNum: "",
        pwd: "",
        pwdAgain: "",
        code: "",
      },
      fromRule: {
        name: [
          { required: true, message: "请输入姓名", trigger: "change" },
          { validator: validateName, trigger: "change" },
        ],
        phoneNum: [
          { required: true, message: "请输入手机号", trigger: "change" },
          { validator: validatePhone, trigger: "change" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "change" },
          { validator: validatePwd, trigger: "change" },
        ],
        pwdAgain: [
          { required: true, message: "请再次输入密码", trigger: "change" },
          { validator: validatePwdAgain, trigger: "change" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }],
      },
      verifyPassword: 1,
      verifyLevel: {
        1: "低",
        2: "中",
        3: "高",
      },
    };
  },
  methods: {
    handleAgree() {
      this.$emit("handleAgree", this.$props.types);
    },
    // 验证密码
    changeChange() {
      let val = this.fromData.pwd;
      let passwordLen = this.fromData.pwd.length;
      // 包含数字
      let numTest = /(?=.*\d)/.test(val);
      // 包含小写字母
      let aTest = /[a-z]/.test(val);
      // 包含大写字母
      let ATest = /[A-Z]/.test(val);
      // 包含特殊符号
      let AaTest = /[^a-zA-Z\s\d]/.test(val);

      let result = [];
      result.push(numTest, aTest, ATest, AaTest);
      let res = result.filter((o) => o);
      let resLen = res.length;
      if (passwordLen < 8 || resLen <= 2) {
        return (this.verifyPassword = 1);
      }
      if (passwordLen >= 8 && passwordLen < 16 && resLen == 3 && !AaTest) {
        this.verifyPassword = 2;
      } else {
        this.verifyPassword = 3;
      }
    },
    formValidate(prop, status, error) {
      console.log(prop, status, error, "prop, status, error");
      let isValidate = false;
      if (prop == "pwd") {
        console.log(prop, "1111");
        this.$refs.FromRef.validateField("pwdAgain");
      }
      for (let item in this.fromData) {
        if (!this.fromData[item]) {
          isValidate = true;
          break;
        }
      }
      this.isBtnDisabled = isValidate;
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.next-btn {
  display: flex;
  justify-content: center;
}
.ivu-btn {
  width: 100%;
}
.pwd-box {
  flex: none;
  display: flex;
  align-items: center;
  padding-top: 10px;
  .pwd-box-tips {
    font-size: 12px;
    color: #aaa;
    line-height: 1;
    margin-left: 10px;
  }
}
.pwd-box-item {
  display: flex;
  span {
    display: block;
    width: 60px;
    height: 4px;
    background: #c4c4c4;
    margin-right: 5px;
  }
  span.pwd-box-current1 {
    background: #ff0000;
  }

  span.pwd-box-current2 {
    background: #ffbf6b;
  }

  span.pwd-box-current3 {
    background: #a2ef4d;
  }
}
</style>
